<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <van-nav-bar @click-right="$router.push('/search')">
      <template #left>
        <van-image width="100" :src="require('@/assets/logo.png')" />
      </template>
      <template #right>
        <van-button round type="info" class="mysearch" size="small">
          <van-icon name="search" />搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 导航标签页 -->
    <!-- <van-tabs v-model="active">
      <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs> -->
    <van-tabs class="myTabs" v-model="active">
      <van-tab v-for="item in channels" :title="item.name" :key="item.id">
        <!--菜单按钮 -->
        <van-icon name="wap-nav" class="btn" @click="open" />
        <!-- 文章列表 -->
        <newsList :channelId="item.id"></newsList>
      </van-tab>
    </van-tabs>
    <!-- 频道管理列表 -->
    <van-action-sheet v-model="menuShow" title="频道管理">
      <channel
        :channels="channels"
        :active="active"
        @input="
          (value) => {
            active = value
          }
        "
      ></channel>
    </van-action-sheet>
  </div>
</template>

<script>
import newsList from './componets/newsList.vue'
import channel from './componets/channel.vue'
import { getChannelsApi } from '@/api'
import { getChannels } from '@/utils/channels'
export default {
  name: 'home',
  data () {
    return {
      channels: [],
      menuShow: false,
      active: ''
    }
  },
  methods: {
    open () {
      this.menuShow = true
    }
  },

  components: {
    newsList,
    channel
  },
  // async created () {
  //   const token = this.$store.state.token.token
  //   // console.log(token)
  //   if (token) {
  //     const res = await getChannelsApi()
  //     // console.log(res.data)
  //     // 渲染到页面结构
  //     this.channels = res.data.data.channels
  //     // console.log(this.channels)
  //   } else {
  //     if (!token) {
  //       // 未登录
  //       // 判断Localstorage中是否有数据
  //       const myChannels = getChannels()
  //       if (myChannels) {
  //         // 存在数据，将数据保存在到channels中
  //         this.channels = myChannels
  //       } else {
  //         // 不存在，直接发起请求
  //         const res = await getChannelsApi()
  //         // console.log(res.data)
  //         // 渲染到页面结构
  //         this.channels = res.data.data.channels
  //         // console.log(this.channels)
  //       }
  //     }
  //   }
  // }
  async created () {
    console.log('home-created')
    // 以上代码可以进行优化，因为发起了2此请求
    // 需要发起请求的条件有
    // 1.token存在
    // 2.token不存在并且localstorage中不存在数据
    // 先获取token
    const token = this.$store.state.token.token
    // 先发一次请求，获得本地数据

    const myChannels = getChannels()
    // 判断token 是否存在以及mychannels不为空
    if (token && !myChannels) {
      const res = await getChannelsApi()
      console.log(res.data)
      // 渲染到页面结构
      this.channels = res.data.data.channels
    } else {
      // 其他情况，直接从本地localstaorage中获取
      this.channels = myChannels
    }
  }
}
</script>

<style lang="less">
.home {
  .mysearch {
    background-color: #5aabfb;
    color: #fff;
    border-radius: 20px;
    i.van-icon.van-icon-search {
      color: #fff;
      margin: 0 10px 0 10px;
    }
  }
  .myTabs {
    position: relative;
    .van-tabs__nav.van-tabs__nav--line.van-tabs__nav--complete {
      width: 90%;
    } //宽度的90%是为了不让文字和菜单按钮结构重合
    .btn {
      position: absolute;
      right: 0;
      top: 0;
      height: 44px;
      line-height: 44px;
    }
  }
}
</style>
